<template>
	<view style="padding-top:48rpx;">
		<uni-nav-bar left-icon="left" backgroundColor="rgb(77, 139, 246)" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
			<view class="nav-title">验证手机号</view>
		</uni-nav-bar>
		<view class="content">
			<uni-forms style="border-bottom: 1px #eee solid;" label-position="top" :border="true">

				<uni-forms-item label="手机号">
					<uni-easyinput :inputBorder="false" v-model="verifyInfo.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="验证码">
					<view class="verifyCode-box">
						<uni-easyinput :inputBorder="false" v-model="verifyInfo.verifyCode" placeholder="请输入手机号验证码" />
						<view class="send" v-if="!isSend" @click="sendVerifyCode">
							发送验证码
						</view>

						<uni-countdown class="countdown" v-else :show-day="false" :showHour="false" :showMinute="false"
							:second="60" color="#BBBBBB" @timeup="timeup"></uni-countdown>
					</view>

				</uni-forms-item>
			</uni-forms>
			<button style="border-radius: 50px;height: 35px;font-size: 14px;margin-top: 20px;"
				class="align-center justify-center" type="primary" hover-class="none" @click="next">下一步</button>
		</view>


	</view>
</template>

<script setup>
	import ccCodeDialog from '@/uni_modules/cc-codeDialog/components/cc-codeDialog/cc-codeDialog.vue'

	import {
		ref,

	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import bankAcountApi from '@/sheep/api/member/bankAcount';
	import sheep from '@/sheep';
	const verifyInfo = ref({
		phone: '',
		userId: uni.getStorageSync('userId') || '',
		verifyCode: undefined,
	})
	const isSend = ref(false)
	const verifyShow = ref(false)

	const onClickNavBack = () => {
		uni.navigateBack()
	}
	const sendVerifyCode = async () => {
		if (verifyInfo.value.phone == '' || !/^1[3-9]\d{9}$/.test(verifyInfo.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
			return
		}
		let res = await bankAcountApi.regphoneVerifycodeApply(verifyInfo.value)
		console.log('绑定手机验证码申请', res)
		if (res.code == 0) {
			if (res.data.ret_code == '0000') {
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
				uni.setStorageSync('setPasswordToken', res.data.token)
				isSend.value = true
			} else {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'none'
				})
			}

		}

	}

	const timeup = () => {
		isSend.value = false
	}


	const next = async () => {
		// verifyShow.value = true

		if (verifyInfo.value.phone == '' || !/^1[3-9]\d{9}$/.test(verifyInfo.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
			return
		}


		let res = await bankAcountApi.regphoneVerifycodeVerify(verifyInfo.value)
		console.log('绑定手机验证码验证', res)
		if (res.code == 0) {
			if (res.data.ret_code == '0000') {
				uni.showToast({
					title: '验证通过',
					icon: 'success'
				})


				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/me/components/bankAcount'
					})
				}, 3000)

			} else {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'none'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: transparent;
	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.content {
		padding: 20px;
		box-sizing: border-box;
	}

	.verifyCode-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.send {
			padding: 5px 10px;
			box-sizing: border-box;
			background: #007AFF;
			color: white;
			border-radius: 50px;
			font-size: 11px;
		}

		.countdown {
			padding: 5px 10px;
			box-sizing: border-box;
			font-size: 14px;

		}
	}
</style>